<template>
  <van-nav-bar
    :title="checkTitle(leftType)"
    fixed
    class="header-title-01 header-title-00"
    >
        <!-- 使用插槽 -->
        <template #left>
            <a  class="x-icon iconfont icon-more" @click="toPath"></a>
            <router-link v-if="leftType === 'HOME'" tag="a" class="home-icon iconfont icon-shouye" to="/home"></router-link><!--工作圈首页地址-->
            <router-link v-if="leftType !== 'HOME'" tag="a"  class="x2-icon iconfont icon-cha" :to="{path: '/circle/detail',query:{circleId:wcId}}"></router-link>
        </template>
        <template #title>
            <slot name="title"></slot>
        </template>
        <template #right>
            <slot name="right-y"></slot>
        </template>
    </van-nav-bar>
</template>

<script>

export default {
    name: 'CircleHeader',
    props: {
        title: {
            type: String,
            default: ''
        },
        leftType: {
            type: String,
            default: 'HOME'
        }
    },
    data() {
        return {
            wcId: this.$store.getters.getCircleId
        };
    },
    computed: {
        checkType() {
            return function(type) {
                let option = {};
                switch (type) {
                case 'HOME':
                    option = {showBack: ''};
                    break;
                case 'NORMAL':
                    option = {showBack: ''};
                    break;
                default:
                    option = {showBack: ''};
                }
                return option;
            };
        },
        checkTitle() {
            return function(type) {
                let title = '';
                switch (type) {
                case 'NORMAL':
                    title = this.$t('circle233');
                    break;
                case 'HOME':
                    title = this.title;
                    break;
                case 'VOTED':
                    title = this.$t('circle243');
                    break;
                case 'VOTE':
                    title = this.$t('circle253');
                    break;
                case 'TOPIC':
                    title = this.$t('circle259');
                    break;
                case 'TOPICD':
                    title = this.$t('circle273');
                    break;
                default:
                    title = this.title;
                    break;
                }
                return title;
            };
        }
    },
    methods: {
        toPath() {
            if (this.leftType === 'HOME') {
                this.$router.push({path: '/circle/home'});
            } else {
                this.$router.back();
            }
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.header-title{
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 14px;
    span{
      color: #333333;
      font-size: 18px;
    }
  }
  .home-icon{
    font-size: 25px;
    color: #666 !important;
    padding: 17px 0;
  }
  .search-icon{
    font-size: 22px;
    padding: 18px 18px 14px 0;
    color: #666 !important;
  }
  .x-icon{
    font-size: 22px;
    padding: 17px 15px;
    color: #666 !important;
  }
  .x2-icon{
    font-size: 24px;
    padding: 17px 0;
    color: #666 !important;
  }
</style>
